<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import * as echarts from 'echarts'

const route = useRoute()
const loading = ref(false)
const classInfo = ref(null)
const analysisData = ref(null)

// 获取班级信息和分析数据
const fetchData = async () => {
  loading.value = true
  try {
    const classId = route.params.id
    const [classRes, analysisRes] = await Promise.all([
      axios.get('/api/admin/class-name/' + classId),
      axios.get('/api/admin/class-analysis/' + classId + '/detail')
    ])
    if (classRes.data?.code === '200') {
      classInfo.value = classRes.data.data
    }
    if (analysisRes.data?.code === '200') {
      analysisData.value = analysisRes.data.data
      initCharts()
    }
  } catch (error) {
    console.error('获取数据失败:', error)
  }
  loading.value = false
}

// 初始化所有图表
const initCharts = () => {
  initTrendChart()
  initEmotionChart()
  initParticipationChart()
  initQualityChart()
}

// 课堂参与度趋势图
const initTrendChart = () => {
  const chart = echarts.init(document.getElementById('trendChart'))
  const option = {
    title: {
      text: '课堂参与度趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: analysisData.value.trend.dates
    },
    yAxis: {
      type: 'value',
      name: '参与度(%)'
    },
    series: [
      {
        name: '抬头率',
        type: 'line',
        smooth: true,
        data: analysisData.value.trend.raiseRates
      },
      {
        name: '低头率',
        type: 'line',
        smooth: true,
        data: analysisData.value.trend.lowerRates
      }
    ]
  }
  chart.setOption(option)
}

// 情绪分布饼图
const initEmotionChart = () => {
  const chart = echarts.init(document.getElementById('emotionChart'))
  const option = {
    title: {
      text: '学生情绪分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '情绪分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: analysisData.value.emotions.happy, name: '快乐' },
          { value: analysisData.value.emotions.neutral, name: '平静' },
          { value: analysisData.value.emotions.sad, name: '悲伤' },
          { value: analysisData.value.emotions.angry, name: '生气' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

// 参与度柱状图
const initParticipationChart = () => {
  const chart = echarts.init(document.getElementById('participationChart'))
  const option = {
    title: {
      text: '课堂参与度分析',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['平均抬头率', '平均低头率']
    },
    yAxis: {
      type: 'value',
      name: '百分比(%)'
    },
    series: [
      {
        type: 'bar',
        data: [
          analysisData.value.participation.avgRaiseRate,
          analysisData.value.participation.avgLowerRate
        ]
      }
    ]
  }
  chart.setOption(option)
}

// 课堂质量雷达图
const initQualityChart = () => {
  const chart = echarts.init(document.getElementById('qualityChart'))
  const raw = analysisData.value.quality;
  const value = [
    Math.min(raw.participation, 100),
    Math.min(raw.emotion, 100),
    Math.min(raw.focus, 100),
    Math.min(raw.interaction, 100),
    Math.min(raw.effect, 100)
  ];
  const option = {
    title: {
      text: '课堂质量评分',
      left: 'center'
    },
    radar: {
      indicator: [
        { name: '参与度', max: 100 },
        { name: '情绪积极性', max: 100 },
        { name: '专注度', max: 100 },
        { name: '互动频率', max: 100 },
        { name: '学习效果', max: 100 }
      ],
      shape: 'polygon',
      splitNumber: 5,
      splitArea: {
        show: true,
        areaStyle: { color: ['#fff'] }
      },
      axisLine: {
        show: true,
        lineStyle: { color: '#ccc' }
      },
      splitLine: {
        show: true,
        lineStyle: { color: '#ccc' }
      },
      radius: '70%'
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: value,
            name: '综合评分'
          }
        ]
      }
    ]
  }
  chart.setOption(option)
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="class-detail" v-loading="loading">
    <div class="page-header">
      <h2>{{ classInfo?.name }} - 课堂分析详情</h2>
      <div class="summary">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="总课程数">{{ analysisData?.summary.totalCourses || 0 }}</el-descriptions-item>
          <el-descriptions-item label="平均抬头率">{{ analysisData?.summary.avgRaiseRate?.toFixed(1) || 0 }}%</el-descriptions-item>
          <el-descriptions-item label="平均参与度">{{ analysisData?.summary.avgParticipation?.toFixed(1) || 0 }}%</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="trendChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="12">
        <el-card>
          <div id="emotionChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="participationChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="24">
        <el-card>
          <div id="qualityChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.class-detail {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 16px;
  font-size: 24px;
  color: #000;
}

.summary {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}

.mt-4 {
  margin-top: 16px;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style> 